<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>

    <link rel="stylesheet" href="../static/css/ZZMicroenterprise.css" ">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card A" style="background-color:#0b87fa;color: white;">
                            <ul>
                                <li>
                                    <h8 style="line-height: 78px; ">组装小微看板</h8>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="pc_content ">
                        <div class="card_header ">
                            <div class="card C D " style="background-color: #33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>未完成任务</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="WaitPrtQty ">{{Quantity}}单</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C " style="background: #33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>待退水口</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="Waitcompleted ">{{Nozzle}}KG</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card_header ">
                            <div class="card C " style="background:#33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>账户余额</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="MKTransac ">{{total}}</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C B " style="background: #33814e; ">
                                <ul class="list-group list-group-flush ">
                                    <li class="list-group-item ">
                                        <h4>产线材料价值</h4>
                                    </li>
                                    <li class="list-group-item1 ">
                                        <h3 id="cardAMT ">{{AMT}}</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>


    <div class="main-left ">
        <div class="Price Price-left ">
            <div class="border-container ">
                <div class="name-title ">
                    我的任务
                </div>
                <el-table :data="defaultDt1" :height=left_el_table_height stripe="true " :default-sort="{prop: 'Price', order: 'descending'} " ref="defaultDt1">
                    <el-table-column prop="goodsname" align="center " label="产品名称">
                    </el-table-column>
                    <el-table-column prop="PATaskQty" align="center " label="任务数">
                    </el-table-column>
                    <el-table-column prop="Completed" align="center " label="已完工数">
                    </el-table-column>
                    <el-table-column prop="Wait" align="center " label="待完工数">
                    </el-table-column>
                </el-table>
                <span class="top-left border-span "></span>
                <span class="top-right border-span "></span>
                <span class="bottom-left border-span "></span>
                <span class="bottom-right border-span "></span>
            </div>
        </div>
    </div>

    <div class="center ">
        <div class="MkCode border-container ">
            <div class="name-title ">
                我的待领料
            </div>
            <el-table :data="defaultDt2" :height=el_table_height stripe="true "  ref="defaultDt2">
                <el-table-column prop="GoodsName" align="center " label="材料名称">
                </el-table-column>
                <el-table-column prop="QtyNeed" align="center " label="需求数量">
                </el-table-column>
                <!-- <el-table-column prop="QtyApply" align="center " label="申请数量">
                </el-table-column> -->
                <el-table-column prop="Wait" align="center " label="待发数量">
                </el-table-column>
            </el-table>
            <span class="top-left border-span "></span>
            <span class="top-right border-span "></span>
            <span class="bottom-left border-span "></span>
            <span class="bottom-right border-span "></span>
        </div>
        <div class="SID border-container ">
            <div class="name-title ">
                我的待退水口
            </div>
            <el-table :data="defaultDt3" :height=el_table_height stripe="true " :default-sort="{prop: 'Price', order: 'descending'} " ref="defaultDt3">
                <!-- <el-table-column prop="GoodsCode" align="center " label="水口代号">
                </el-table-column> -->
                <el-table-column prop="GoodsName" align="center " label="水口名称">
                </el-table-column>
                <el-table-column prop="Quantity" align="center " label="待退数量">
                </el-table-column>
                <el-table-column prop="Unit" align="center " label="单位">
                </el-table-column>
            </el-table>
            <span class="top-left border-span "></span>
            <span class="top-right border-span "></span>
            <span class="bottom-left border-span "></span>
            <span class="bottom-right border-span "></span>
        </div>
    </div>

    <div class="main-right ">
        <div class="Price Price-left ">
            <div class="border-container ">
                <div class="name-title ">
                    我的账单流水
                </div>
                <el-table :data="defaultDt4" :height=left_el_table_height stripe="true " :default-sort="{prop: 'Price', order: 'descending'} " ref="defaultDt4">
                    <el-table-column prop="GoodsName" align="center " label="交易类型">
                    </el-table-column>
                    <el-table-column prop="IMkRPAmt"  width=80 align="center " label="收入">
                    </el-table-column>
                    <el-table-column prop="OMkRPAmt"  width=80 align="center " label="支出">
                    </el-table-column>
                    <el-table-column prop="BalanceAmt" width=110 align="center " label="余额">
                    </el-table-column>
                    <el-table-column prop="CreateDate" width=130 align="center " label="日期">
                    </el-table-column>
                </el-table>
                <span class="top-left border-span "></span>
                <span class="top-right border-span "></span>
                <span class="bottom-left border-span "></span>
                <span class="bottom-right border-span "></span>
            </div>
        </div>
    </div>
    </div>

    </body>



    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    left_el_table_height: 770,
                    el_table_height: 350,
                    defaultDt1: [],
                    defaultDt2: [],
                    defaultDt3: [],
                    defaultDt4: [],
                    Quantity:0,
                    Nozzle:0,
                    total: 0,
                    AMT: 0
                }
            },
            methods: {
                GetTabelDate(that) {
                    //未完成任务
                    GetCodeData("VB21112216360129", "Get", "Mk").then(function(res) {
                        that.Quantity = res.rows[0].a
                    }),
                        //待退水口
                        GetCodeData("VB21112017175040", "Get", "Mk").then(function(res) {
                            that.Nozzle = res.rows[0].Nozzle
                        }),
                        //账户余额
                        GetCodeData("VB21112017193995", "Get", "Mk").then(function(res) {
                            that.total = res.rows[0].total
                        }),
                        //产线材料价值
                        GetCodeData("VB21112017200492", "Get", "Mk").then(function(res) {
                            that.AMT = res.rows[0].AMT
                        }),
                        //我的任务
                        GetCodeData("VB21112216413320", "Get", "Mk").then(function(res) {
                            that.defaultDt1 = res.rows
                        }),
                        //我的待领料
                        GetCodeData("VB21112216431352", "Get", "Mk").then(function(res) {
                         console.dir(res.rows)
                            that.defaultDt2 = res.rows
                        }),
                        //我的待退水口
                        GetCodeData("VB21112215152943", "Get", "Mk").then(function(res) {
                            that.defaultDt3 = res.rows
                        }),
                        //我的账单流水
                        GetCodeData("VB21112215182250", "Get", "Mk").then(function(res) {
                            that.defaultDt4 = res.rows
                        })
                },
            },

            mounted() {
                TableAotoRoll([this.$refs.defaultDt1, this.$refs.defaultDt2, this.$refs.defaultDt3, this.$refs.defaultDt4])
                var that = this
                setTimeout(function() {
                    that.GetTabelDate(that)
                }, 0);
                setInterval(function() {
                    that.GetTabelDate(that)
                }, 1000 * 60);
            }
        })
    </script>



</html>